<template>
  <div>
    <NavBar title="擅长" />
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="smaBox"
        v-for="item in list"
        :key="item.id"
        @click="$router.push('/doctor?user_id=' + item.user_id)"
      >
        <div class="left">
          <img :src="item.avatar" alt="" />
        </div>
        <div class="right">
          <h2>
            {{ item.realname }}<span>{{ item.doctor.title }}</span
            ><span>可开处方</span>
          </h2>
          <p>执业编号：{{ item.doctor.practice_cert_no }}</p>
          <p>
            <span
              v-for="val in item.doctor.good_at_class"
              :key="val.class_id"
              >{{ val.class_name }}</span
            >
          </p>
          <p>擅长：{{ item.doctor.good_at }}</p>
          <p>
            <van-icon name="star" color="#F8AB27" size="12"
              ><span>{{
                item.doctor.statistics.last_month_evaluate_score
              }}</span></van-icon
            >
            <span class="shu">|</span>月回答<span>{{
              item.doctor.statistics.last_month_consult_case_count
            }}</span
            ><span class="shu">|</span> 月处方<span>{{
              item.doctor.statistics.last_month_prescription_count
            }}</span>
          </p>
          <p>
            <span v-for="val in item.doctor.labels" :key="val.label_id">{{
              val.label_name
            }}</span>
          </p>
          <div>
            <p>
              <span
                >图文&nbsp;￥{{
                  Math.floor(item.doctor.consult_text_price)
                }}</span
              ><span
                >电话&nbsp;￥{{
                  Math.floor(item.doctor.consult_call_price)
                }}</span
              >
            </p>
            <van-button
              style="
                height: 30px;
                border: none;
                background-color: #e5f8f6;
                border-radius: 35px;
              "
              plain
              type="success"
              >问医生</van-button
            >
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useCount } from "../../store/index.js";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { getGoodsDoctors } from "../../API";
import NavBar from "../../components/NavBar.vue";
let route = useRoute();
let store = useCount();
// 推荐医生列表
let list = ref([]);
let page = 1;
//触底加载参数
let loading = ref(true);
let finished = ref(false);
//擅长医生列表请求
let getGoodsDoctorList = async () => {
  loading.value = true;
  let id = route.query.id;
  let { data } = await getGoodsDoctors({
    id,
    page,
  });
  console.log(data);
  list.value.push(...data.data.list);
  loading.value = false;
  finished.value = !data.data.list.length;
};
getGoodsDoctorList();

// 初始化请求函数
let initRequest = () => {
  page = 1;
  getGoodsDoctorList();
};
// 解决路由缓存问题;
onBeforeRouteUpdate(() => {
  initRequest();
});
//触底加载函数
let onLoad = () => {
  page++;
  // console.log("正在加载" + page);
  getGoodsDoctorList();
};
</script>
<style scoped>
.smaBox {
  display: flex;
  justify-content: flex-start;
  padding: 30px 20px;
  border-top: 1px solid #efefef;
  margin-top: 20px;
}
.left {
  width: 108px;
  margin-right: 20px;
}
.left img {
  width: 108px;
  height: 108px;
  border-radius: 20px;
}
.right {
  width: 100%;
}
.right h2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.right h2 span:nth-of-type(1) {
  color: #727272;
  font-size: 28px;
  font-weight: normal;
  margin: 0 20px;
}
.right h2 span:nth-of-type(2) {
  width: 114px;
  height: 38px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e2edff;
  color: #668df4;
  border-radius: 10px;
}
.right p:nth-of-type(1) {
  color: #727272;
  font-size: 20px;
  margin: 10px 0;
}
.right p:nth-of-type(2) {
  font-size: 17px;
  color: #999;
  margin: 15px 0;
  display: flex;
  justify-content: flex-start;
}
.right p:nth-of-type(2) span {
  width: 65px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #eee;
  margin-right: 20px;
}
.right p:nth-of-type(3) {
  color: #727272;
  font-size: 27px;
  width: 480px; /* 设置段落的宽度 */
  height: 70px; /* 设置段落的高度 */
  overflow: hidden; /* 隐藏超出高度的内容 */
  display: -webkit-box; /* 将段落视为弹性伸缩盒子 */
  -webkit-line-clamp: 2; /* 设置最大显示行数为2行 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子的排列方向为垂直 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.right p:nth-of-type(4) {
  margin: 20px 0;
  color: #969696;
}
.right p:nth-of-type(4) span {
  color: #f8ab27;
  padding: 0 10px;
  font-weight: bold;
}
.shu {
  color: #727272;
}
.right p:nth-of-type(5) {
  font-size: 17px;
  color: #909090;
  font-weight: bold;
  margin: 15px 0;
  display: flex;
  justify-content: flex-start;
}
.right p:nth-of-type(5) span {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #eee;
  margin-right: 20px;
}
.right div {
  width: 95%;
  display: flex;
  justify-content: space-between;
  font-weight: bolder;
  margin: 20px 0;
}
.right div span {
  font-size: 28px;
  margin-right: 30px;
}
</style>